<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>山西矿山Demo</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .poi-tip {
            width: 215px;
            height: 54px;
            background: url('/examples/resources/images/落位点.png') no-repeat;
            padding-left: 70px;
            line-height: 54px;
        }

        .poi-name {
            color: #fff;
            font-size: 16px;
        }

        .poi-value {
            color: #5efeba;
            font-size: 18px;
            margin-left: 10px;
        }

        .poi-value span {
            font-size: 14px;
        }
    </style>
</head>

<body>

    <div id="mapContainer" style="position: relative;">
    </div>
    </script>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [113.22184023134041, 37.49814877881913, 994108.7024991572],
        lookAt: [113.22184023134041, 37.49814877881913, 0],
        cameraScrollSpeed: 15,
        minZoom: 3,
        maxZoom: 22,
        ambientLightIntensity: 3,
        ambientLightType: 'hemiSphere',
        useCarpet: true,
        background: "Fog", //添加shp文件或矢量底图的背景应尽量选用雾模式
        useDefaultTexture: true, //是否使用瓦片默认纹理
        baseLayer: [
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                readableUrl: true,
                tileType: 'image',
            },
        ]
    });

    let city = ['/县界/大同市', '/县界/晋城市', '/县界/晋中市', '/县界/临汾市', '/县界/吕梁市', '/县界/朔州市',
        '/县界/忻州市', '/县界/阳泉市', '/县界/运城市', '/县界/长治市', '/县界/太原市']
    let cityColor = ['#FFA500', '#3CB371', '#FF69B4', '#FFA500', '#3CB371', '#3CB371', '#FF69B4', '#FFA500', '#FF69B4', '#FF4500', '#FF4500']
    let all = [];
    let provinceShp, tiles3d, videoMarker;
    init();
    function init() {
        //加载省级行政区域
        // provinceShp = new GE.ShapeObject({
        //     url: 'http://wlres.dev.3dpaas.cn:9876/resources/1b8b2fcb26b020120aebfac57779e06a/shp/山西省/山西省_市界.shp',
        //     // url: '/examples/resources/shp/yuhang.shp',
        //     polygonFillColor: '#FFA500',
        //     polygonBorderColor: 'black',//边线轮廓颜色
        //     polygonBorderWidth: 10,//边线轮廓宽度
        //     maxPixel: 10000,
        //     showBorder: true,
        //     merge: true,
        //     loaded: function () {
        //         provinceShp.children[0].material.opacity = 0.6;
        //     }
        // })
        // app.add(provinceShp);

        //预加载市级区域
        for (let i = 0; i < city.length; i++) {
            loadCity(city[i], cityColor[i]);
        }

        //预加载3dtiles，实际不会产生网络请求
        loadTiles();
    }

    function showAll() {
        //隐藏3dtiles
        tiles3d.visible = false;
        videoMarker.visible = false;
        //隐藏县级节点但不隐藏POI
        for (let i = 0; i < all.length; i++) {
            all[i].visible = true;
            all[i].poi.visible = true;
        }
        //显示省级节点
        // provinceShp.visible = true;
        app.camera.flyTo(new GE.Point(113.22184023134041, 37.49814877881913, 994108.7024991572), new GE.Point(113.22184023134041, 37.49814877881913, 0), 0);
    }

    function loadCity(name, color) {
        let shapeObject = new GE.ShapeObject({
            // url: 'http://wlres.dev.3dpaas.cn:9876/resources/1b8b2fcb26b020120aebfac57779e06a/shp/山西省/' + name + ".shp",
            url: 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/shp/山西省/' + name + ".shp",
           
            // url: '/examples/resources/shp/yuhang.shp',
            polygonFillColor: color,
            polygonBorderColor: 'black',//边线轮廓颜色
            polygonBorderWidth: 10,//边线轮廓宽度
            maxPixel: 10000,
            showBorder: true,
            merge: true,
            loaded: function () {
                //初始化要显示的标注的html内容
                const div = document.createElement('div');
                div.className = 'poi-tip';
                div.innerHTML = '<span class="poi-name">' + name.split('/')[2] + '</span><span class="poi-value">35<span>个</span></span>'

                div.onclick = function (e) {
                    //显示自身的县级节点
                    shapeObject.visible = true;
                    app.camera.flyTo(new GE.Point(shapeObject.children[0].position.x, shapeObject.children[0].position.y, 250000, '3857'),
                        new GE.Point(shapeObject.children[0].position.x, shapeObject.children[0].position.y, 0, '3857'), 0);
                    //隐藏其他节点
                    for (let i = 0; i < all.length; i++) {
                        if (all[i] !== shapeObject) {
                            all[i].visible = false;
                            all[i].poi.visible = false;
                        }
                    }
                    //隐藏省级行政区域
                    // provinceShp.visible = false;
                }

                //初始化标注组件，并将htmlelement作为参数传入，这里是一个div
                poi = new GE.HtmlMarker(div);
                //设置组件在三维场景中的位置
                let position = new GE.Point(shapeObject.children[0].position.x, shapeObject.children[0].position.y, 0, '3857');
                poi.position.set(position.x, position.y, 0);
                //设置对其方式，0,0为中心对齐
                poi.center.set(0.15, 0.46);

                //将组件添加至场景中
                app.add(poi);
                shapeObject.poi = poi;

                shapeObject.children[0].material.opacity = 0.6;
            }
        });

        // shapeObject.visible = true;
        app.add(shapeObject);
        all.push(shapeObject);
    }

    function showXinZhou() {
        //隐藏3dtiles
        tiles3d.visible = false;
        videoMarker.visible = false;

        app.camera.flyTo(new GE.Point(all[6].children[0].position.x, all[6].children[0].position.y, 250000, '3857'),
            new GE.Point(all[6].children[0].position.x, all[6].children[0].position.y, 0, '3857'), 0);
        //隐藏其他节点
        for (let i = 0; i < all.length; i++) {
            // if (all[i] !== shapeObject) {
            all[i].visible = false;
            all[i].poi.visible = false;
            // }
        }
        let shapeObject = all[6];
        //显示自身的县级节点
        shapeObject.visible = true;
        shapeObject.poi.visible = true;
        // //隐藏省级行政区域
        // provinceShp.visible = false;
    }

    function loadTiles() {
        tiles3d = new GE.Tiles3d({
            url: 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/3dtiles/jinhua/tileset.json',
            // autoLocate: true,
            z: -50,
            errorTarget: 200,
            minSize: 800,
            maxSize: 6600,
        });
        app.add(tiles3d);
        tiles3d.visible = false;

        //初始化要显示的标注的html内容
        const div = document.createElement('div');
        div.className = 'poi-tip';
        div.innerHTML = '<span class="poi-name">摄像头</span>';
        div.onclick = function (e) {
            alert('摄像头点击');
        }

        //初始化标注组件，并将htmlelement作为参数传入，这里是一个div
        videoMarker = new GE.HtmlMarker(div);
        //设置组件在三维场景中的位置
        let position = new GE.Point(119.55199794797521, 29.34684097010147, 30, '4326').changeEPSGType('3857');
        videoMarker.position.set(position.x, position.y, position.z);
        //设置对其方式，0,0为中心对齐
        videoMarker.center.set(0.15, 0.46);
        videoMarker.visible = false;

        //将组件添加至场景中
        app.add(videoMarker);
    }

    function showTiles() {
        tiles3d.visible = true;
        app.camera.flyTo(new GE.Point(119.5514, 29.3459, 1500), new GE.Point(119.5514, 29.3459, 0), 0);
    }

    function showVideo() {
        tiles3d.visible = true;
        videoMarker.visible = true;
        app.camera.flyTo(new GE.Point(119.5530528378254, 29.345662139996442, 87.49672776787506), new GE.Point(119.55117956007227, 29.347629788667202, 0), 1000);
    }
    app.on('Click', function (e) {
        console.log(e);
    });
    btn();
    function btn() {
        let button = new GE.Button('倾斜摄影', function () {
            showTiles();
        });
        app.ui.add(button);

        let button1 = new GE.Button('全省数据', function () {
            showAll();
        });
        app.ui.add(button1);

        let button2 = new GE.Button('忻州数据', function () {
            showXinZhou();
        });
        app.ui.add(button2);

        let button3 = new GE.Button('显示摄像头', function () {
            showVideo();
        });
        app.ui.add(button3);
    }
</script>

</html>